Skip to main content

校验表单

企企的系统中的单据，我们默认草稿保存（非提交）的时候是不做校验的。但是有些用户可能更喜欢在保存的时候做提前的数据校验。在我们目前的产品中还没有参数可以开启保存时校验。但是我们可以通过脚本来实现。

下面的脚本演示了在保存时，调用 form.validate()方法来校验数据。

thisApp.onSave = async (ctx) => {
    const form = ctx.getFormContext().form;

    if (! await form.validate()) {
        // 我们需要调用 cancel 方法阻止保存方法的继续执行。
        ctx.getEventArgs().cancel();
        // 提示一下用户
        qiqi.ui.message.showWarning('表单数据没有通过校验，请检查');
    }
};
  • validate方法不仅在 form 中存在，在 field 中也存在。
  • validate 是一个 async的方法。所以记得通过 await或者 form.validate().then(...).catch(...) 来调用。
  • 校验失败需要 ctx.getEventArgs().cancel()方法来阻止表单继续执行保存数据的动作。

上面的方式满足我们没有自定义字段，或者自定义字段已经配置了业务规则的情况。有时我们需要更精细的校验控制，我们就可以自定义校验器。

添加校验器有两种方式：

  • 通过 field.addValidator 方法添加校验器。
  • 通过 form.addValidator 方法添加校验器。

校验报销单的联系电话​

这段脚本演示了在填写报销单时，如果用户填写的联系电话长度小于 11 位则产生一个错误。

thisApp.formOnLoad = async (ctx) => {
    const form = ctx.getFormContext().form;

    /**
     * 给联系电话增加一个自定义的校验器
     * 为了演示方便，这里我们假设联系电话必须是手机，并且长度必须不少于 11 位
     */
    form.addValidator('applyUserTelephone', field => {
        const value = field.value;

        if (value && value.length < 11) {
            return '长度不能低于 11 位';
        }
    });
};

校验报销单长途子表中的出发地和目的地不能相同​

thisApp.formOnLoad = async (ctx) => {
    const form = ctx.getFormContext().form;

    /**
    * 校验长途的出发地和目的地，如果不同则报错。
    */
    const validateDistrict = (line) => {
        const fromDistrict = qiqi.util.get(line, 'fromDistrict.id');
        const toDistrict = qiqi.util.get(line, 'toDistrict.id');

        if (fromDistrict && toDistrict && fromDistrict === toDistrict) {
            return '出发地和目的地不能相同';
        }
    }

    form.addValidator('reimburseTransports.fromDistrict', field => {
        return validateDistrict(field.parent.value);
    });

    form.addValidator('reimburseTransports.toDistrict', field => {
        return validateDistrict(field.parent.value);
    });
};

关联字段校验​

比如子表有两列， 一列文本列(字段：csCeShiWenBen)， 一列是创建人(字段：createUser)， 存在这样一个需求： 当创建人名字选的是"智元"时， 文本列必填。

处理这个需求时我们不仅仅是要考虑到 fieldChange 的时机， 另外一个要面对的是编辑态： 编辑一个保存过的草稿， 提交时也要对创建人是"智元"行的文本列进行非空校验。

实现时要考虑两点：

  1. 校验器： 给文本列加非空校验器
  2. 校验时机： 创建人变化时校验文本列， 这就建立了一依赖关系， 文本列的校验时机依赖于创建人的变化
thisApp.formOnLoad = async (ctx) => {
    const formContext = ctx.getFormContext();
    const form = formContext.form;
    /**
     * 添加具有依赖关系的校验器，
     * @param logicPath 源字段或列的logic path, 要校验的字段
     * @param validator 校验器
     * @param dependencies 依赖字段的 logic path， 依赖的字段值变化时会触发源字段的校验
     */
    form.addDependentValidator('csDetailListItems.csCeShiWenBen', (field) => {
        const rowData = field.parent.value;
        const userName = qiqi.util.get(rowData, 'createdUser.name');
        if (userName === '智元' && rowData.csCeShiWenBen === '') {
            return '创建人是智元时， 测试文本不能为空';
        }
    }, ['csDetailListItems.createdUser'])
}